<template>
  <div class="activity-detail" v-if="activity">
    <h2>{{ activity.title }}</h2>
    <p><strong>日期:</strong> {{ activity.date }}</p>
    <p><strong>地点:</strong> {{ activity.location }}</p>
    <p><strong>描述:</strong> {{ activity.description }}</p>
    <router-link to="/public-activities">返回列表</router-link>
  </div>
</template>

<script>
export default {
  props: {
    activity: {
      type: Object,
      default: null
    }
  }
}
</script>

<style scoped>
.activity-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
p {
  margin-bottom: 10px;
}
a {
  color: #42b983;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}
</style>